<template>
<!-- 首页商品数据组件 -->
  <div class="home-data">
    <!-- 
      这一页没什么好说的
      获取数据,通过回调函数取出来
      v-for遍历 v-bind和{{}}动态的吧数据展示到页面上
     -->
    <div class="life" v-for="(item,index) in list" :key="index">
      <img :src="item.headUrl" alt="">
      <ul>
        <li v-for="(i,indexs) in item.list" :key="indexs">
          <span class="first-span">{{i.title}}</span>
          <span class="last-span">{{i.desc}}</span>
          <div class="imgs">
            <img :src="i.products[0].imgUrl" alt="">
            <img :src="i.products[1].imgUrl" alt="">
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {floorlist} from '../../../api/index.js'
export default {
  data(){
    return {
      list:[]
    }
  },
  mounted(){
    floorlist((res)=>{
      this.list = res.data.data
    })
  }
}
</script>

<style scoped>
  .home-data{
    width: 100%;
    margin-bottom: 100px;
  }
  .life{
    width: 100%;
  }
  .life>img{
    width: 100%;
    height: 80px;
  }
  ul{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  li{
    width: 50%;
    height: 270px;
    padding: 20px;
    border-bottom: 1px solid #dcdcdc;
    box-sizing: border-box;
  }
  li:nth-child(2n+1){
    border-right: 1px solid #dcdcdc;
  }
  .first-span{
    display: block;
    font-size: 34px;
  }
  .last-span{
    display: block;
    font-size: 26px;
    color: red;
    padding: 10px 0;
  }
  .imgs{
    display: flex;
    justify-content: space-evenly;
  }
  .imgs img{
    width: 130px;
    height: 130px;
  }
</style>